import Vue from 'vue'
import Vuex from 'vuex'
import axios from '../plugins/axios'
import { Message} from "element-ui";
import {clearStore, getStore, setStore} from "../config/store";
Vue.use(Vuex)

export default new Vuex.Store({
  //state就是共享的数据
  state: {
    user: {
      username:getStore({name:'username'})||'',
      password:getStore({name:'password'})||'',
      realName:getStore({name:'realName'})||'',
      id:getStore({name:'id'})||'',
      avatar:getStore({name:'avatar'})||'',
      address:getStore({name:'address'})||'',
      accessToken:getStore({name:'accessToken'})||'',
      refreshToken:getStore({name:'refreshToken'})||'',
    },
    shopCart:[],
    savedAccount:getStore({name:'savedAccount'})||{save:false,account:{},autoLogin:false}

  },
  //当我们直接调用store.state中的数据时, 会不可避免的产生数据安全的问题, 有时候出了错,我们根本不知道是谁修改了这个数据
  //所以, 我们应该使用get和set, 也就是getters和mutations+actions
  //state中的每一个对象都应该有对应的getter
  getters: {
    userInfo: state => {
      return state.user
    },
    username: state => {
      return state.user.username
    },
    password: state => {
      return state.user.password
    },
    realName: state => {
      return state.user.realName
    },
    id: state => {
      return state.user.id
    },
    avatar: state => {
      return state.user.avatar
    },
    address: state => {
      return state.user.address
    },
    accessToken: state => {
      return state.user.accessToken
    },
    refreshToken: state => {
      return state.user.refreshToken
    },
    shopCart: state => {
      return state.shopCart
    },
    savedAccount:state => {
      return state.savedAccount
    }
  },
  //更改store中的数据唯一的方式就是 提交 mutation
  //mutations里面写的是一个个修改数据的方法
  mutations: {
    //每个mutation中的第一参数都应该是state
    SET_USER_INFO(state,userInfo){
      state.user.user=userInfo
    },
    SET_USERNAME(state,username) {
      state.user.username=username
      setStore({name:'username',content: state.user.username,type:'session'})
    },
    SET_PASSWORD(state,password) {
      state.user.password=password
      setStore({name:'password',content: state.user.password,type:'session'})
    },
    SET_REAL_NAME(state,realName) {
      state.user.realName=realName
      setStore({name:'realName',content: state.user.realName,type:'session'})
    },
    SET_ID(state,id) {
      state.user.id=id
      setStore({name:'id',content: state.user.id,type:'session'})
    },
    SET_AVATAR(state,avatar) {
      state.user.avatar=avatar
      setStore({name:'avatar',content: state.user.avatar,type:'session'})
    },

    SET_ADDRESS(state,address) {
      state.user.address=address
      setStore({name:'address',content: state.user.address,type:'session'})
    },
    SET_ACCESS_TOKEN(state,accessToken) {
      state.user.accessToken=accessToken
      setStore({name:'accessToken',content: state.user.accessToken,type:'session'})
    },
    SET_REFRESH_TOKEN(state,refreshToken) {
      state.user.refreshToken=refreshToken
      setStore({name:'refreshToken',content: state.user.refreshToken,type:'session'})
    },
    SET_SHOP_CART(state,shopCart) {
      state.shopCart= shopCart
    },
    SAVE_ACCOUNT(state,savedAccount){
      state.savedAccount=savedAccount
      setStore({name:'savedAccount',content:state.savedAccount,type:'local'})
    },
  },
  //action里面写的是很多mutations的集合
  //比如用户登录之后,会从后台获得一个用户信息对象, 这个对象包括了用户名,id等基础信息, 和用户的姓名等拓展信息, 以及用户凭证等安全信息
  //这些信息需要每个都set进store中的user对象中, 但是每个信息的修改方法都已经在mustaions里写死了, 我们要做的其实是创建一个新的action,在其中提交多个mutation
  actions: {
    login({ commit },loginForm) {
      // eslint-disable-next-line no-unused-vars
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          axios.post(
              '/api/userInfo',
              {
                username: loginForm.username,
                password: loginForm.password,
              }
          ).then((res)=>{
            //res()是ajax异步反应请求这个操作中的响应对象，其中成员变量除了data之外,
            // 其他配置config,请求头headers和data，请求request，也存在于mock的req对象（request请求对象）中
            const  data=res.data;
            console.log(data)
            if(data.error_description){
              Message({
                message: data.error_description,
                type:'error'
              })
            }else{
              commit('SET_USERNAME', data.data.username)
              commit('SET_PASSWORD', data.data.password)
              commit('SET_REAL_NAME', data.data.realName)
              commit('SET_ID', data.data.id)
              commit('SET_AVATAR', data.data.avatar)
              commit('SET_ADDRESS', data.data.address)
              commit('SET_ACCESS_TOKEN', data.data.accessToken)
              commit('SET_REFRESH_TOKEN', data.data.refreshToken)
              if(this.state.savedAccount.save){
                let saveAccount={
                  save: this.state.savedAccount.save,
                  account: {username:data.data.username,password:data.data.password},
                  autoLogin: this.state.savedAccount.autoLogin
                }
                commit('SAVE_ACCOUNT',saveAccount)
              }
              Message.success({message:data.success_description,type:'success'})
            }
            resolve();
          }).catch((err)=>{
              Message.error({message:err,type:'error'})
          })
          let shopCart=[
            {
              name:'逃离塔科夫PC游戏正版Escape From Tarkov 白边版黑暗边缘限量版 欧版俄',
              imgUrl:'https://img12.360buyimg.com/n0/s80x80_jfs/t1/179612/4/3541/688663/609a3ee8E68742a15/0db45654217af8fe.png!q70.jpg',
              category:'白边版（俄版激活码）！',
              unitprice:'168.00',
              count:'3',
              checked:false
            },
            {
              name:'永劫无间捏脸 永劫无间国服捏脸数据',
              imgUrl:'https://img10.360buyimg.com/n0/s80x80_jfs/t1/190876/33/19488/750358/6121b8f6Ec10e942b/771121504d9bfecf.png!q70.jpg',
              category:'怪物猎人',
              unitprice:'48.00',
              count:'1',
              checked:false
            },
            {
              name:'索尼(SONY)【PS4/ Pro/Slim/ PS5 游戏机使用】 黑暗之魂3 年度版 中文',
              imgUrl:'https://img20.360buyimg.com/n0/s80x80_jfs/t1/182701/14/15410/641096/60fa4ca3E287c8be1/cb1f873788e656ae.png!q70.jpg',
              category:'黑暗之魂3 年度版 中文 ...',
              unitprice:'246',
              count:'4',
              checked:false
            }

          ]
          commit('SET_SHOP_CART',shopCart)
          resolve()
        },1300)
      })


    },
    logout({ commit }) {
      // eslint-disable-next-line no-unused-vars
      return new Promise((resolve,reject)=>{
        setTimeout(()=>{
          commit('SET_USERNAME', '')
          commit('SET_PASSWORD', '')
          commit('SET_REAL_NAME', '')
          commit('SET_ID', '')
          commit('SET_AVATAR', '')
          commit('SET_ADDRESS', '')
          commit('SET_ACCESS_TOKEN', '')
          commit('SET_REFRESH_TOKEN', '')
          commit('SET_SHOP_CART','')
          clearStore({type:'session'})
          resolve()
        })

      })
    }
  },
  modules: {
  }
})
